<!--
 * @Author: lailifang
 * @Date: 2022-03-15 17:15:54
 * @Description: 预计分类占比
-->
<template>
  <div class="leftPie">
    <com-box :title="pieData.title">
      <charts class="charts" :params="pieData.params"></charts>
    </com-box>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, watch } from 'vue'
import { useStore } from 'vuex'
import comBox from '@/components/comBox/comBox.vue'
import httpRequest from '@/service'
export default defineComponent({
  name: 'leftTop',
  components: { comBox },
  props: {
    adcode: {
      type: String,
      default: ''
    },
    timeValue: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  setup(props, { emit }) {
    const store = useStore()
    interface IChartState {
      title: string
      classId: string
      params: any
    }
    const pieData: IChartState = reactive({
      title: '',
      classId: '',
      params: {
        chartInstance: null,
        loading: true,
        map: {
          value: '数量'
        },
        options: {
          dataset: {
            dimensions: ['name', 'value'],
            source: []
          },
          legend: {
            itemWidth: 11,
            itemHeight: 11,
            left: '45%',
            width: 220,
            itemGap: 10,
            formatter: (name: any) => {
              let data: any[] = pieData.params.options.dataset.source,
                total = 0,
                value = 0,
                percent = ''
              for (let item of data.values()) {
                total += item.value
                if (item.name == name) {
                  value = item.value
                }
              }
              percent = ((value / total) * 100).toFixed(2)
              if (!value || !total) {
                return `{name|${name}}{per|无}`
              }
              const changeItem =
                data.find((i: any) => i.classId === pieData.classId)?.name || ''
              if (name === changeItem) {
                return `{changeName|${name}}{changePer|${percent}%}`
              } else {
                return `{name|${name}}{per|${percent}%}`
              }
            },
            textStyle: {
              rich: {
                name: {
                  color: '#fff',
                  fontSize: 14,
                  width: 140,
                  padding: [0, 4, 0, 0]
                },
                per: {
                  color: '#9ccfff',
                  fontSize: 14
                },
                changeName: {
                  color: '#04F2F8',
                  fontSize: 14,
                  width: 140,
                  padding: [0, 4, 0, 0]
                },
                changePer: {
                  color: '#04F2F8',
                  fontSize: 14
                }
              }
            },
            selected: {}
          },
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              type: 'pie',
              radius: '75%',
              center: ['25%', '40%'],
              // roseType: 'radius',
              label: {
                show: false
              },
              itemStyle: {
                color: (params: any) => {
                  const colorList = [
                    '#d7864a',
                    '#f0ff00',
                    '#432ada',
                    '#0867d6',
                    '#bd64f6',
                    '#0df1ff',
                    '#86bcff'
                  ]
                  return colorList[params.dataIndex]
                }
              }
            }
          ]
        },
        event: {
          click: (params: any) => {
            pieData.classId !== params.data.classId
              ? (pieData.classId = params.data.classId)
              : (pieData.classId = '')
            emit('change', pieData.classId)
            pieApi()
          },
          customEvent: (chartInstance: any) => {
            pieData.params.chartInstance = chartInstance
            pieData.params.chartInstance.on(
              'legendselectchanged',
              (params: any) => {
                legendSelect(params)
              }
            )
          }
        }
      }
    })
    const pieApi = () => {
      pieData.params.loading = true
      httpRequest
        .get({
          url: 'M4WarningClassif',
          params: {
            adcode: props.adcode,
            startTime: store.state.globalDate.startDate,
            endTime: store.state.globalDate.endDate
            // startTime: props.timeValue[0],
            // endTime: props.timeValue[1]
          }
        })
        .then((res) => {
          pieData.title = res.title
          pieData.params.options.dataset.source = res.data
          pieData.params.loading = false
        })
        .catch(() => {
          console.log('请求失败')
        })
    }
    const legendSelect = (params: any) => {
      pieData.params.chartInstance.dispatchAction({
        type: 'legendSelect',
        name: params.name
      })
      const changeDate = pieData.params.options.dataset.source.find(
        (i: any) => i.name === params.name
      )
      pieData.classId !== changeDate.classId
        ? (pieData.classId = changeDate.classId)
        : (pieData.classId = '')
      emit('change', pieData.classId)
      pieApi()
    }
    watch(
      () => [props.adcode, props.timeValue],
      () => {
        pieApi()
      }
    )
    const refreshData = () => {
      pieApi()
    }
    return { pieData, legendSelect, refreshData }
  }
})
</script>
<style lang="less" scoped>
.leftPie {
  width: 100%;
  height: 265px;
  margin-top: 15px;
  .charts {
    height: 200px;
  }
}
</style>
